<template>
  <div class="drawer-content">
    <div class="drawer-section nav">
      <div class="drawer-section nav">
        <drawer-project
          :id="inbox.id"
          :title="inbox.title"
          icon="rules"
          v-if="inbox"
        />
        <drawer-item icon="rules" text="收件箱" v-else></drawer-item>
      </div>
      <div class="drawer-section nav" title="正在施工">
        <drawer-item icon="shoucang" text="今天"></drawer-item>
        <drawer-item icon="calendar" text="计划"></drawer-item>
        <drawer-item icon="clock" text="随时"></drawer-item>
        <drawer-item icon="package" text="某天"></drawer-item>
      </div>
      <div class="drawer-section nav" title="正在施工">
        <drawer-item icon="view_details" text="日志薄"></drawer-item>
        <drawer-item icon="empty_trash" text="废纸篓"></drawer-item>
      </div>
    </div>
    <t-progress-bar
      background="#c3dcfa"
      style="position:absolute"
      :delay="200"
      :show="projects.length === 0"
      infinite
      on
    ></t-progress-bar>
    <t-slide-transition>
      <div class="drawer-section collection" v-if="projects.length > 0">
        <drawer-project
          v-for="project in rootProjects"
          :key="project.id"
          :id="project.id"
          :title="project.title"
        />
      </div>
    </t-slide-transition>
    <t-slide-transition>
      <div class="drawer-section collection" v-if="projects.length > 0">
        <drawer-workspace
          v-for="workspace in workspaces"
          :key="workspace.id"
          :id="workspace.id"
          :title="workspace.title"
          :projects="getProjectsByIds(workspace.projectIds)"
        />
      </div>
    </t-slide-transition>
  </div>
</template>
<script>
import DrawerItem from "@/components/DrawerItem";
import DrawerProject from "@/components/DrawerProject";
import DrawerWorkspace from "@/components/DrawerWorkspace";
import DATA_ALL from "@/graphql/DataAll.gql";
export default {
  name: "Drawer",
  components: {
    DrawerItem,
    DrawerProject,
    DrawerWorkspace
  },
  apollo: {
    projects: DATA_ALL,
    workspaces: DATA_ALL
  },
  data() {
    return {
      projects: [],
      workspaces: []
    };
  },
  computed: {
    inbox() {
      return this.projects.filter(p => p.id === "inbox")[0];
    },
    rootProjects() {
      return this.projects
        ? this.projects.filter(p => p.parent === "root" && p.id !== "inbox")
        : [];
    }
  },
  methods: {
    getProjectsByIds(ids) {
      return ids && this.projects
        ? this.projects.filter(p => ids.includes(p.id))
        : [];
    }
  }
};
</script>
<style lang="less">
.drawer-content {
  min-height: 100%;
  background-color: #f5f6f8;
  padding: 16px;
  padding-top: 38px;
  border-right: 1px solid #e9ecf0;
}
.drawer-section {
  &.nav {
    margin: 10px 0;
    font-weight: bold;
  }
  &.collection {
    margin-top: 16px;
  }
}
</style>
